<!-- 关于我们 -->
<template>
    <div class='bgff pd pt10 pm10 aboutUs'>
        <div class="productCenter-top">
            <img :src="form.head.img" class="productCenter-top-img">
            <div class="wd pr h100" @click="photoShowModal = true">
                <div class="vertical-center tl h100">
                    <div @click.stop="nullfun" class="w100">
                        <p class="fz18 cf w100 ">
                            <n-input v-model:value="form.head.msg" type="text" placeholder="" size="medium"
                                clearable></n-input>

                        </p>
                        <div class="title-text fz32 flex-1 cf mt10">
                            <n-input class="fz32" v-model:value="form.head.title" type="text" placeholder=""
                                size="medium" clearable></n-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class=" wd mt80 ">
            <div class="display-flex">
                <div class="flex-1 pr60">
                    <p class="fz42 b">
                        <n-input class="fz32" v-model:value="form.introduce.title" type="text" size="medium" clearable
                            @change=""></n-input>

                    </p>

                    <p class="mt40 AboutUs-context">

                        <n-input style="min-height:350px" v-model:value="form.introduce.text" type="textarea"
                            placeholder="" size="medium" clearable @change=""></n-input>

                    </p>
                </div>
                <img :src="form.introduce.img" class="AboutUsimg cz" @click="photoShowModaler = true">
            </div>

            <div class="AboutUs-jl display-flex cen">
                <div class="flex-1 vertical-center" v-for="(item, idx) in form.introduce.sign" :key="idx">
                    <p class="fz18">
                        <span class="fz42 red">
                            <n-input v-model:value="item.val" style="width:120px" type="text" placeholder=""
                                size="medium" clearable></n-input>

                        </span>
                        <n-input class="fz16" v-model:value="item.unit" style="width:60px" type="text" placeholder="" size="medium"
                            clearable></n-input>

                    </p>
                    <p class="fz18 mt10">
                        <n-input v-model:value="item.title" style="width:200px" type="text" placeholder="" size="medium"
                            clearable></n-input>

                    </p>
                </div>




            </div>
        </div>

        <img :src="form.developmentHistoryImg" class="w100 mt80 cz imgjz sdffgdt" @click="photoShowModalsi=true">


        <p class="fz18 mt20">
            联系我们
        </p>
        <div class="display-flex mt20">
            <div class="flex-1 mr10" v-for="(item, idx) in form.connectUs">
                <!-- v-model:value="" -->
                <n-input v-model:value="item.name" type="text" placeholder="公司名称" clearable></n-input>
                <n-input v-model:value="item.map" type="text" placeholder="地址" clearable class="mt20"></n-input>
                <n-input v-model:value="item.phone" type="text" placeholder="联系电话" clearable class="mt20"></n-input>
            </div>
        </div>
        <p class="fz18 mt20">
            团队风采

        </p>




        <div class="team-ien-context">
            <div class="pr" v-for="(item, idx) in form.team">
                <img :src="item" />
                <i class="iconfont dx-shanchu dsftytrr sz" @click="delimgteam(idx)"></i>
            </div>
            <div class="cover-context vertical-center" @click="photoShowModalsan = true">
                <i class="iconfont dx-24gl-pictures fz32"></i>
            </div>
        </div>

        <div class="aboutUs-bottom vertical-center">
            <div>
                <n-button type="primary" size="medium" @click="aboutSave">保存</n-button>
                <n-button type="primary" size="medium" @click="callBack" class="ml20">返回上一页</n-button>
            </div>
            
        </div>
    </div>

    <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
        <template #header>
            <div>头图</div>
        </template>
        <div>
            <photoGallery @getImg="getImg" types="迪聚海思头图"></photoGallery>
        </div>
        <template #action>
            <div class="tr">
                <n-button @click="photoShowModal = false"> 取消 </n-button>
                <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
            </div>
        </template>
    </n-modal>


    <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
        <template #header>
            <div>关于我们封面</div>
        </template>
        <div>
            <photoGallery @getImg="getImger" types="迪聚海思关于我们封面"></photoGallery>
        </div>
        <template #action>
            <div class="tr">
                <n-button @click="photoShowModaler = false"> 取消 </n-button>
                <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
            </div>
        </template>
    </n-modal>


    <n-modal v-model:show="photoShowModalsan" preset="card" class="Stock-diagnosis">
        <template #header>
            <div>团队风采</div>
        </template>
        <div>
            <photoGallery @getImg="getImgsan" types="迪聚海思团队风采"></photoGallery>
        </div>
        <template #action>
            <div class="tr">
                <n-button @click="photoShowModalsan = false"> 取消 </n-button>
                <n-button class="ml10" type="info" @click="setImgsan"> 确定 </n-button>
            </div>
        </template>
    </n-modal>


    <n-modal v-model:show="photoShowModalsi" preset="card" class="Stock-diagnosis">
        <template #header>
            <div>发展历程</div>
        </template>
        <div>
            <photoGallery @getImg="getImgsi" types="迪聚海思发展历程"></photoGallery>
        </div>
        <template #action>
            <div class="tr">
                <n-button @click="photoShowModalsi = false"> 取消 </n-button>
                <n-button class="ml10" type="info" @click="setImgsi"> 确定 </n-button>
            </div>
        </template>
    </n-modal>

</template>
<script lang='ts' setup>
import { ref } from "vue"
import { callBack, dxpost, qurl, dxget } from "../../../util/index"
import photoGallery from "../../../components/util/photoGallery";
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const photoShowModalsan = ref(false)
const photoShowModalsi = ref(false)

const form = ref({
    head: {
        img: "",
        title: "",
        msg: ""
    },
    introduce: {
        title: "",
        text: "",
        img: "",
        sign: [
            {
                val: "",
                unit: "",
                title: ""
            }, {
                val: "",
                unit: "",
                title: ""
            }, {
                val: "",
                unit: "",
                title: ""
            }, {
                val: "",
                unit: "",
                title: ""
            }
        ]
    },
    developmentHistoryImg:"",
    connectUs: [
        {
            name: "",
            map: "",
            phone: ""
        },
        {
            name: "",
            map: "",
            phone: ""
        }
    ],
    team: []

})


let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    form.value.head.img = jjnmnxe;
    photoShowModal.value = false;
};

let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    form.value.introduce.img = jjnmnxeer;
    photoShowModaler.value = false;
};


let jjnmnxesan = "";
const getImgsan = (data) => {
    jjnmnxesan = data;
};
const setImgsan = () => {
    form.value.team.push(jjnmnxesan)
    photoShowModalsan.value = false;
};
const delimgteam = (idx) => {
    form.value.team.splice(idx, 1)
}



let jjnmnxesi = "";
const getImgsi = (data) => {
    jjnmnxesi = data;
};
const setImgsi = () => {
    form.value.developmentHistoryImg = jjnmnxesi;
    photoShowModalsi.value = false;
};




const nullfun = () => {
    console.log('66');
}

const aboutSave = async()=>{
   const {errno}:any =  await dxpost("djhs/djsinglePage",{
        id:1,
        detail:JSON.stringify(form.value)
    },"put")
    if(errno==0){
        window.$message.success("操作成功！")
    }
}

const getdetail = async ()=>{
  const {data}:any=  await dxget("djhs/djsinglePage",{id:1})
  form.value= JSON.parse(data.detail)
}
getdetail()
</script>
<style scoped>

</style>